<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery.js">
	</script>

	<style type="text/css">
			img {
				max-width: 100%;
			}

			#nav {
				display: inline;
				height: 50px;
				width: 50px;
				float: left;
				padding: 5px;
			}
			/*头像*/

			#nav img {
				width: 50px;
				height: 50px;
			}

			#info {
				display: inline;
				width: 100%;
				padding: 10px;
			}

			#content {
				background: #eee;
				margin-left: 50px;
			}
		</style>

	<script type="text/javascript">
			$(document).ready(

				function() {

					$("#head_background").click(
						function() {
							var str = $("#content").text();
							window.weichat.showToast("点击图片");
						}
					)

				}

			);
		</script>

</head>

<body>
<img id="head_background" src="images/background.jpg" />
<script>
	var json = window.weichat.getJson();
	var infos = eval(json);
	for(var i = 0; i < infos.length; i++) {
		info = infos[i];
		var img = info.icon;
		var userName = info.name;
		var content = info.content;
		$("#head_background").after("<div ><div id='nav'><img src=" + img + " /></div><div id='info'><div id='userName'>" + userName + "</div><p id='content'>" + content + "</p></div></div>");
		$("#userName").click(
			function() {
				var str = $(this).text();
				window.weichat.showToast(str);
			}
		)
		$("#content").click(
			function() {
				var str = $(this).text();
				window.weichat.showToast(str);
			}
		)
	}
</script>
</body>

</html>